<template>
  <div>
    <article class="top">
      <ul>
        <li class="one">
          <div class="one_display">{{ topList.title }}</div>
          <div class="one_display">认领特权</div>
        </li>
        <li class="card" :class="{ empty: v.name.length == 0 && v.name.length == 0 }" v-for="v in topList.data">
          <div class="card_title" v-if="v.title.length > 0">
            <div class="circle"></div>
            <div class="name"> {{ v.title }}</div>
          </div>
          <div class="card_title" v-if="v.name.length > 0">
            <div class="circle"></div>
            <div class="name"> {{ v.name }}</div>
          </div>
        </li>
        <li class="end">
          立即认证
        </li>
      </ul>
    </article>
  </div>
</template>

<script>

export default {
  props:['topList'],
  name: '',
  data() {
    return {
        // topList: [
        // { title: '浏览、分享、收藏', name: '下载资源' },
        // { title: '作品需求发布和管理', name: '科普活动发布和管理' },
        // { title: '内容传播认证奖励', name: '' },
        // { title: '', name: '' }
      //]
   }
  },
  created() {},
  methods: {

  },

}
</script>

<style lang='scss' scoped>
 .top {
    padding: 15px 0 35px 32px;

    ul {
      display: flex;

      li {
        flex-shrink: 0;
        list-style-type: none;
      }

      .one {
        width: 80px;
        height: 110px;
        background: #F7F8FA;
        border-radius: 2px 2px 2px 2px;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 700;
        color: #3D3D3D;
        line-height: 21px;
        letter-spacing: 5px;
        display: flex;
        justify-content: center;
        align-items: center;

        //
        .one_display {
          // transform: rotate(0deg);
          writing-mode: vertical-rl;
        }

      }

      .card {
        background: #E7F0FF;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #68A1FF;
        font-size: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #3D3D3D;
        line-height: 40px;
        padding: 15px 32px 13px 25px;
        margin-left: 15px;

        .card_title {
          display: flex;
          align-items: center;

          .circle {
            width: 10px;
            height: 10px;
            background-color: #68A1FF;
            border-radius: 50%;
            margin-right: 5px;
          }

          .name {}
        }
      }

      .empty {
        width: 180px;
        height: 110px;
      }

      .end {
        font-weight: 700;
        color: #FFFFFF;
        line-height: 21px;
        background: #D5A771;
        border-radius: 2px 2px 2px 2px;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 700;
        color: #FFFFFF;
        line-height: 21px;
        letter-spacing: 5px;
        writing-mode: vertical-rl;
        margin-left: 15px;
        padding: 13px 20px;
      }
    }

    height: 170px;
    background: #FFFFFF;
  }
</style>